<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar 
      title="设备详情" 
      :border="false"
      :fixed="true"
      :status-bar="true"
      background-color="#4980FF"
      color="#FFFFFF"
      left-icon="back"
      @clickLeft="goBack">
    </uni-nav-bar>
    
    <!-- 主内容区域 -->
    <scroll-view class="detail-content" scroll-y>
      <!-- 信息列表 -->
      <uni-section title="设备信息" type="line">
        <uni-list>
          <uni-list-item 
            title="设备编号"
            :rightText="equipment.id"
            :showArrow="false">
          </uni-list-item>
          <uni-list-item 
            title="设备名称"
            :rightText="equipment.name"
            :showArrow="false">
          </uni-list-item>
          <uni-list-item 
            title="供应商"
            :rightText="equipment.supplier"
            :showArrow="false">
          </uni-list-item>
          <uni-list-item 
            title="规格/型号"
            :rightText="equipment.model"
            :showArrow="false">
          </uni-list-item>
          <uni-list-item 
            title="单位"
            :rightText="equipment.unit"
            :showArrow="false">
          </uni-list-item>
          <uni-list-item 
            title="单价"
            :rightText="`¥ ${equipment.price} 元`"
            :showArrow="false">
          </uni-list-item>
          <uni-list-item 
            title="设备类别"
            :rightText="equipment.category"
            :showArrow="false">
          </uni-list-item>
          <uni-list-item 
            title="状态"
            :showArrow="false">
            <template v-slot:footer>
              <uni-tag 
                :text="equipment.status.text" 
                :type="equipment.status.type === 'out' ? 'error' : 'success'" 
                size="small">
              </uni-tag>
            </template>
          </uni-list-item>
          <uni-list-item 
            title="油耗定额"
            :rightText="equipment.fuelQuota || '-------------'"
            :showArrow="false">
          </uni-list-item>
          <uni-list-item 
            title="定额单位"
            :rightText="equipment.quotaUnit || '-------------'"
            :showArrow="false">
          </uni-list-item>
          <uni-list-item 
            title="主要参数"
            :rightText="equipment.mainParams || '-------------'"
            :showArrow="false">
          </uni-list-item>
        </uni-list>
      </uni-section>
      
      <!-- 底部按钮区域 -->
      <view class="action-buttons">
        <uni-button 
          type="primary" 
          size="large" 
          @click="scanFuel"
          :custom-style="{ backgroundColor: '#EFF3FF', color: '#165DFF', borderColor: '#EFF3FF' }">
          <uni-icons type="scan" size="16" color="#165DFF" style="margin-right: 8rpx;"></uni-icons>
          扫码加油
        </uni-button>
        <uni-button 
          :type="equipment.status.type === 'out' ? 'success' : 'error'" 
          size="large" 
          @click="toggleStatus"
          :custom-style="equipment.status.type === 'out' ? 
            { backgroundColor: '#E8FFEA', color: '#39C75A', borderColor: '#E8FFEA' } : 
            { backgroundColor: '#FFECE8', color: '#F53F3F', borderColor: '#FFECE8' }">
          <uni-icons 
            :type="equipment.status.type === 'out' ? 'plus' : 'minus'" 
            size="16" 
            :color="equipment.status.type === 'out' ? '#39C75A' : '#F53F3F'" 
            style="margin-right: 8rpx;">
          </uni-icons>
          {{equipment.status.type === 'out' ? '入场' : '出场'}}
        </uni-button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      equipment: {
        id: 'BH-001',
        name: '小松挖掘机',
        supplier: '徐州睿进建筑工程有限公司',
        model: '360',
        unit: '元、台/天',
        price: '2,466.66',
        category: '挖掘机',
        status: { type: 'out', text: '已出场' },
        fuelQuota: '',
        quotaUnit: '',
        mainParams: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      // 这里可以根据ID加载设备详情
      // this.loadEquipmentDetail(this.id);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    scanFuel() {
      // 实现扫码加油功能
      uni.showToast({
        title: '扫码加油功能开发中',
        icon: 'none'
      });
    },
    toggleStatus() {
      // 如果设备已出场，则跳转到设备进场表单页
      if (this.equipment.status.type === 'out') {
        uni.navigateTo({
          url: '/pages/equipment/entry/index?id=' + this.equipment.id
        });
      } else {
        // 设备出场处理
        this.equipment.status = { type: 'out', text: '已出场' };
        
        uni.showToast({
          title: '设备已出场',
          icon: 'success'
        });
      }
    }
  }
}
</script>

<style>
/* 移除页面加载后的伪元素 */
:root uni-page-body::after {
  display: none !important;
}

.container {
  flex: 1;
  background-color: #F5F7FA;
  padding-top: 88px;
}

.detail-content {
  flex: 1;
  padding: 16px;
}

.action-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  margin-bottom: 16px;
}

.action-buttons .uni-button {
  flex: 1;
}
</style>